import React from 'react';
import { Modal } from 'antd';
import { TrophyOutlined } from '@ant-design/icons';

function AchievementModal({ visible, onClose }) {
  return (
    <Modal
      open={visible}
      onCancel={onClose}
      footer={null}
      width={400}
      centered
      className="achievement-modal"
    >
      <div style={{ textAlign: 'center', padding: '20px 0', position: 'relative', overflow: 'hidden' }}>
        <div className="confetti-container">
          {[...Array(20)].map((_, i) => (
            <div key={i} className={`confetti confetti-${i % 3}`} style={{
              left: `${Math.random() * 100}%`,
              animationDelay: `${Math.random() * 3}s`
            }} />
          ))}
        </div>
        <TrophyOutlined style={{ 
          fontSize: 64, 
          color: '#FFD700',
          marginBottom: 16,
          animation: 'bounce 1s infinite'
        }} />
        <h2 style={{ 
          fontSize: '24px',
          margin: '16px 0',
          background: 'linear-gradient(45deg, #2563eb, #60a5fa)',
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent'
        }}>
          太棒啦！
        </h2>
        <p style={{ 
          fontSize: '18px',
          color: '#4B5563',
          margin: '8px 0 20px'
        }}>
          今日任务已全部完成~
        </p>
        <div className="achievement-stars" />
      </div>
    </Modal>
  );
}

export default AchievementModal; 